 <div class="main_fr_mic" style="margin-bottom:10px;">
          <i class="glyphicon glyphicon-home"></i>
          <a href="admin/index">首页</a><span>></span>
          <a >系统管理</a><span>></span>
          <a class="active">菜单管理</a>
 </div>
		<div id="interfaceList" class="main_fr_down over">
		 <div class="main_fr_search over mb10">
			  <div class="good_top2"><span>菜单树</span></div>
                   <div class="zTreeDemoBackground  main_fr_search_cx col-md-5">
	                   	<input id ="tdid" type="hidden"/>
							<a id="addRootNode" class="btn btn-default">添加一级菜单</a>
						<ul id="treeDemo" class="ztree"></ul>
					</div>
					
					
					<div class="zTreeDemoBackground  main_fr_search_cx col-md-7">
						<h3 align="center">菜单详情</h3><br>
                   	 
						<form class="form-horizontal" id="addForm">
						<input type="hidden" id="id" name="menu.id">
						<div class="form-group">
							<label for="inputEmail3" class="col-sm-2 control-label">uri</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="uri" placeholder="请输入二级或三级菜单的uri" name="menu.uri">
							</div>
						</div>
						<div class="form-group">
							<label for="exampleInputEmail2" class="col-sm-2 control-label">style_class</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="style_class" placeholder="请输入一级菜单的style_class" name="menu.style_class">
							</div>
						</div>
						<div class="form-group">
							<label for="exampleInputEmail2" class="col-sm-2 control-label">同级菜单排序数</label>
							<div class="col-sm-9">
								<input type="number" class="form-control" id="sort" placeholder="请输入同级菜单排序数（正整数）" name="menu.sort" minlength="1"  maxlength="10" required>
							</div>
						</div>
						<div class="form-group">
							<label for="exampleInputEmail2" class="col-sm-2 control-label">状态</label>
							<div class="col-sm-9">
							<select id="status" name="menu.status" class="form-control" style="width:200px;">
				              		<option value="1">开启</option>
				              		<option value="0">禁用</option>
				              	</select>
							</div>
						</div>
						<div class="form-group">
						<label for="exampleInputEmail2" class="col-sm-2 control-label"></label>
							<div class="col-sm-9">
							<button type="submit" class="btn btn-success">保存</button>
							<button type="reset" class="btn btn-default">重置</button>
							</div>
						</div>
					</form>
				</div>
			  </div>
		</div>
<div class="hide addTreeNodeDiv">
<br>
	<form class="form-horizontal">
		<div class="form-group col-md-12">
			<label class="col-sm-3  col-md-2 control-label">菜单名</label>
			<div class="col-sm-9 col-md-10">
				<input type="text" class="form-control" placeholder="请输入菜单名称" name="newNodeName">
			</div>
		</div>
	</form>
</div>
<script src="assets/plugins/zTree_v3/js/jquery.ztree.core-3.5.js"></script>
<script src="assets/plugins/zTree_v3/js/jquery.ztree.excheck-3.5.js"></script>
<script src="assets/plugins/zTree_v3/js/jquery.ztree.exedit-3.5.js"></script>
<!-- //zTree_v3 -->
<link rel="stylesheet" href="assets/plugins/zTree_v3/css/metroStyle/metroStyle.css" type="text/css">
<link rel="stylesheet" href="assets/plugins/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<style type="text/css">
	.ztree li span.button.add {margin-left:2px; margin-right:-1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
	</style>
<SCRIPT type="text/javascript">
	var setting = {
		async: {
			enable: true,
			url:"menu/getNodes/1",
			autoParam:["id", "name=n", "level=lv"],
			otherParam:{"otherParam":"zTreeAsyncTest"},
			dataFilter: filter
		},
		drag: {
			autoExpandTrigger: false 
		},
		view: {expandSpeed:"",
			addHoverDom: addHoverDom,
			removeHoverDom: removeHoverDom,
			selectedMulti: false
		},
		edit: {
			enable: true,
			showRemoveBtn: showRemoveBtn
		},
		data: {
			simpleData: {
				enable: true
			}
		},
		callback: {
			beforeRemove: beforeRemove,
			beforeRename: beforeRename,
			onRemove: onRemove,
			onClick: onClick
		}
	};
	function onClick(event, treeId, treeNode, clickFlag) {
		$("#tdid").val(treeNode.id);
		$("#id").val(treeNode.id);
		$.post("menu/getInfo",{id:treeNode.id},function(data){
			if(data.code == 0){
				var resp = data.content;
				$("#uri").val(resp.uri);
				$("#style_class").val(resp.style_class);
				$("#sort").val(resp.sort);
				$("#status").val(resp.status);
			}
		})
	}
	function filter(treeId, parentNode, childNodes) {
		if (!childNodes) return null;
		for (var i=0, l=childNodes.length; i<l; i++) {
			childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
		}
		return childNodes;
	}
	function showRemoveBtn(treeId, treeNode) {
		return treeNode.isParent==false;
	}
	function beforeRemove(treeId, treeNode) {
		console.log();
		if(treeNode.isParent==false){
			return confirm("确认删除该课程菜单-- " + treeNode.name + " 吗？该课程菜单下所有的信息也将被删除!") ;
		}else if(treeNode.isParent==true){
			layer.msg("该课程菜单有下属课程菜单无法删除!");
			return false;
		}
	}
	function onRemove(e, treeId, treeNode) {
		$.ajax({
			url:"menu/delType?ttid="+Math.random(),
			data:{id:treeNode.id},
			success:function(data){
				if(data.code==0){
			  		  layer.msg("删除成功！");
			  	  }else{
			  		layer.msg("删除失败！");
			  	  }
			 }
		});
	}
	function beforeRename(treeId, treeNode, newName) {
		if (newName.length == 0) {
			alert("课程菜单名称不能为空.");
			return false;
		}
		$.ajax({
			type: "POST",
			url:"menu/updateType?ttid="+Math.random(),
			dataType:"json",
			data:{id:treeNode.id,name:newName},
			success:function(data){
		  	  if(data.code==0){
		  		  layer.msg("修改成功！");
		  	  }else{
		  		layer.msg('操作失败！');
		  	  }
			 }
		});
		return true;
	}

	var newCount = 1;
	function addHoverDom(treeId, treeNode) {
		var sObj = $("#" + treeNode.tId + "_span");
		if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
		var addStr = '';
		if(treeNode.level==0 || treeNode.level==1 ){
			addStr = "<span class='button add' id='addBtn_" + treeNode.tId
			+ "' title='添加子菜单' onfocus='this.blur();'></span>";
		}
		sObj.after(addStr);
		var btn = $("#addBtn_"+treeNode.tId);
		if (btn) btn.bind("click", function(){
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			//获取课程菜单id
			$("input[name='newNodeName']").val('');
			$(".addTreeNodeDiv").removeClass("hide");
			layer.open({
				type : 1,
				area: '25%',
				offset: '40%',
				shift: 1,
				title : "添加菜单",
				content : $(".addTreeNodeDiv"),
				btn: ['确定', '取消'],
				yes: function(index, layero) {
					var newNodeName =$("input[name='newNodeName']").val();
					if(newNodeName==''){
						layer.msg('请输入菜单名');
						return false;
					}
					var tdid = treeNode.id;
					if(tdid==''|| tdid==null){//解决选中后的第二次添加treeNode.id未空的问题
						tdid = $("#tdid").val();
					}
					$.post("menu/getLowerId?ttid="+Math.random(),{pid:tdid,'newNodeName':newNodeName,"type":1}, function(data){
						if(data.code==3){
							layer.msg('操作失败，菜单名称不能重复！');
							return false;
						}else{
							layer.msg('添加成功，请刷新查看效果！');
							treeNode = zTree.addNodes(treeNode, {id:data.content.id, pId:tdid, name:data.content.name});
						}
					 });
					layer.close(index);
				},
				cancel: function(index) {
					layer.msg("已关闭");
				}
			})
			return false;
			 
		});
		 
		var btn2 = $("#editBtn_"+treeNode.tId);
		if (btn2) btn2.bind("click", function(){
			alert(treeNode.id);
			return false;
		});
		$("[title='rename']").attr('title','重命名');
		$("[title='remove']").attr('title','删除');
	};
	function removeHoverDom(treeId, treeNode) {
		$("#addBtn_"+treeNode.tId).unbind().remove();
	};

	$(document).ready(function(){
		$.fn.zTree.init($("#treeDemo"), setting);
	});
	var qp;
	function toAddDepartment(type){
		var title = "添加课程菜单";
		if(type==2){
			title = "修改添加课程菜单"
		}
		 $.post("wbDepartment/toAddDepartment",function(data){
			qp = layer.open({
					type: 1,
					title: title, //显示默认标题栏
					shade: [0.5,"#000",true], //显示遮罩
					area: ['450px', '400px'],
					content: data
			    }); 
		 })
	 };
	 
</SCRIPT>

<script>
$.validator.setDefaults({
    submitHandler: function() {
    	 $.post('menu/update', $("#addForm").serialize(), function(data){
    		if(data.code==0){
    			layer.msg("保存成功！");
    			layer.close(index);
    		}else{
    			layer.msg("保存失败！");
    			return false;
    		}
    	}) 
    }
});
$().ready(function() {
    $("#addForm").validate();
});
$('#addRootNode').click(function(){
	var zTree = $.fn.zTree.getZTreeObj("treeDemo");
	$("input[name='newNodeName']").val('');
	$(".addTreeNodeDiv").removeClass("hide");
	layer.open({
		type : 1,
		area: '25%',
		offset: '40%',
		shift: 1,
		title : "添加一级菜单",
		content : $(".addTreeNodeDiv"),
		btn: ['确定', '取消'],
		yes: function(index, layero) {
			var newNodeName =$("input[name='newNodeName']").val();
			if(newNodeName==''){
				layer.msg('请输入菜单名');
				return false;
			}
			$.post("menu/getLowerId?ttid="+Math.random(),{pid:0,'newNodeName':newNodeName,"type":1}, function(data){
				if(data.code==3){
					layer.msg('操作失败，菜单名称不能重复！');
					return false;
				}else{
					zTree.addNodes(null,{id:data.content.id, pId:1, name:data.content.name});
				}
			 });
			layer.close(index);
		},
		cancel: function(index) {
			layer.msg("已关闭");
		}
	})
	return false;
});
</script>